<template>
  <div class="listMain">
    <div class="bookMain">
      <div class="typeBox">
        <div class="type" :style="typeStyle('角色')" @touchend="typeTouch('角色')">角色</div>
        <div class="type" :style="typeStyle('词汇')" @touchend="typeTouch('词汇')">词汇</div>
      </div>
      <div class="picbook" :style="picbookStyle">
        <p class="name">{{selectCard.name}}</p>
        <p class="explain">{{selectCard.picbookIntroduction}}</p>
      </div>
      <div class="border" @touchend="picbookTouch">
        <div class="play" @touchend.stop="playPicbookAudio" ref="playIcon"></div>
      </div>
      <swiper v-show="type==='角色'" :options="swiperOption" class="swiper" ref="listSwiper">
        <swiper-slide v-for="(list,index) in roleList" :key="index">
          <v-touch class="card" :style="roleStyle(item)" @tap="roleTouch(item)" v-for="(item,itemIndex) in list"
            :key="itemIndex">
            <img class="cardBg" :src="variable.STATICE_URLTITLE+ 'personals/%E8%83%8C%E6%99%AF%E5%8D%A1.png'" />
            <span>{{item?item.explain:'a'}}</span>
            <div class="iconBox">
              <img :src="item.roleImg">
            </div>
          </v-touch>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <swiper v-show="type==='词汇'" :options="swiperOption" class="swiper" ref="listSwiper">
        <swiper-slide v-for="(list,index) in imageryList" :key="index">
          <v-touch class="card" :style="imageryStyle(item)" @tap="imageryTouch(item)" v-for="(item,itemIndex) in list"
            :key="itemIndex">
            <img class="cardBg" :src="variable.STATICE_URLTITLE+ 'personals/%E8%83%8C%E6%99%AF%E5%8D%A1.png'" />
            <span>{{item.explain}}</span>
            <div class="iconBox">
              <img :src="item.eryImg">
            </div>
          </v-touch>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <div class="next"></div>
    </div>
    <Vip ref="vip"/>
    <LoadPicbook ref="loadPicbook" />
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex"
import LoadPicbook from "../picbookList/loadPicbook.vue"
import Vip from "../common/vip.vue"
export default {
  components: {
    LoadPicbook,
    Vip
  },
  data() {
    return {
      swiperOption: {
        speed: 700,
        pagination: {
          el: '.swiper-pagination',
        },
        longSwipesRatio: 0.15
      },
      type: "词汇",
      selectCard: {}
    }
  },
  created() {
    if (this.roleList.length === 0 && this.imageryList.length === 0) {
      this.setPopup({
        content: "你还没有阅读哦",
        callback: () => {
          this.setLoading({
            callback: () => {
              this.$router.push("/personal/menu")
            }
          })
        }
      })
      return
    }
    //默认为第一个
    if (this.roleList.length > 0) {
      this.type = "角色"
      this.selectCard = this.roleList[0][0]
      return
    }
    if (this.imageryList.length > 0) {
      this.type = "词汇"
      this.selectCard = this.imageryList[0][0]
    }
  },
  computed: {
    //角色
    roleList() {
      const list = this.userCollect.role.filter(item => {
        //去除角色名称数字后缀
        item.explain = item.explain.replace(/\d+$/, '')
        //查找角色对应的绘本
        const picbook = this.picbookList.filter(pItem => { return pItem.id === item.picbookId })[0]
        if (picbook) {
          item.homeImageUrl = picbook.homeImageUrl
          item.name = picbook.name
          item.speaker = picbook.detail.speaker
          item.picbookIntroduction = picbook.detail.introduction.substring(5, picbook.detail.introduction.indexOf("\n"))
          return item
        }
      })
      return this.split(list, 6)
    },
    //词汇
    imageryList() {
      const list = this.userCollect.imagery.filter(item => {
        //查找角色对应的绘本
        const picbook = this.picbookList.filter(pItem => { return pItem.id === item.picbookId })[0]
        if (picbook) {
          item.homeImageUrl = picbook.homeImageUrl
          item.name = picbook.name
          item.speaker = picbook.detail.speaker
          item.picbookIntroduction = picbook.detail.introduction.substring(5, picbook.detail.introduction.indexOf("\n"))
          return item
        }
      })
      return this.split(list, 6)
    },
    //绘本背景
    picbookStyle() {
      return {
        background: "url(" + this.selectCard.homeImageUrl + ")-0.5rem 0/cover"
      }
    },
    //点击角色放大
    roleStyle(item) {
      return function (item) {
        const scale = item.roleId === this.selectCard.roleId ? 1.05 : 1
        const shadow = item.roleId === this.selectCard.roleId ? "drop-shadow(0px 0px 0.2rem rgb(255,179,69))" : ""
        return {
          transform: "scale(" + scale + ")",
          filter: shadow
        }
      }
    },
    //点击词汇放大
    imageryStyle(item) {
      return function (item) {
        const scale = item.eryId === this.selectCard.eryId ? 1.05 : 1
        const shadow = item.eryId === this.selectCard.eryId ? "drop-shadow(0px 0px 0.2rem rgb(255,179,69))" : ""
        return {
          transform: "scale(" + scale + ")",
          filter: shadow
        }
      }
    },
    typeStyle(type) {
      return function (type) {
        const scale = this.type === type ? 1.2 : 1,
          color = this.type === type ? "white" : "rgb(220, 135, 16)",
          background = this.type === type ? "newList/选中分类.png" : "newList/未选中分类.png"
        return {
          transform: "scale(" + scale + ")",
          color: color,
          background: "url(" + this.variable.STATICE_URLTITLE + background + ")0 0/100% 100%"
        }
      }
    },
    ...mapGetters("picbookListStatus", {
      picbookList: "getPicbookList"
    }),
    ...mapGetters("personalStatus", {
      userCollect: "getUserCollect",
      userVip: "getUserVip"
    }),
    ...mapGetters("roleStatus", {
      getRoleAwards: "getRoleAwards"
    }),
  },
  methods: {
    typeTouch: function (type) {
      this.clickMusic()
      if (type === "词汇" && this.imageryList.length === 0) {
        this.setPopup({
          content: "你还没有阅读过词汇哦"
        })
        return
      }
      if (type === "角色" && this.roleList.length === 0) {
        this.setPopup({
          content: "你还没有阅读过角色哦"
        })
        return
      }
      this.type = type
    },
    roleTouch: function (item) {
      //显示卡片
      this.clickMusic()
      this.selectCard = item
      item.roleName = item.explain
      this.setPackCard({
        type: "role",
        icon: item.cardImage,
        content: item
      })
    },
    imageryTouch: function (item) {
      //显示卡片
      this.clickMusic()
      this.selectCard = item
      this.setPackCard({
        type: "imagery",
        icon: item.eryImg,
        content: item
      })
    },
    playPicbookAudio: function () {
      this.clickMusic()
      this.$refs.playIcon.style.transform = "scale(1.1)"
      this.parseTextAudio({
        text: this.selectCard.name,
        speaker: this.selectCard.speaker,
        end: () => {
          this.parseTextAudio({
            text: this.selectCard.picbookIntroduction,
            speaker: this.selectCard.speaker,
            end: () => {
              this.$refs.playIcon.style.transform = "scale(1)"
            }
          })
        }
      })
    },
    picbookTouch: function () {
      this.clickMusic()
      this.parseTextAudio({ play: false })
      if((this.selectCard.vipFreeType === 0 || !this.selectCard.vipFreeType) && !this.userVip.isVip){
        this.$refs.vip.vipShowTouch()
        return
      } else {
        this.$refs.loadPicbook.loadPicbook({
          picbookId: this.selectCard.picbookId,
          beforeRouter: "personal/read"
        })
      }

    },
    ...mapActions("mainStatus", ["setPopup", "setLoading"]),
    ...mapActions("packStatus", ["setPackCard"]),
  }
}
</script>

<style lang="stylus" scoped>
.listMain
  position absolute
  width 100vw
  height 100vh
  transform translate3d(calc(0px - var(--X)), calc(0px - var(--Y)), 0px)
  .bookMain
    background url($urlTitle + 'personals/阅读背景.png') 0 0 / 100% 100%
    width 152vh
    height 80vh
    margin 18vh auto 0 auto
    max-width 90vw
    max-height 55vw
    min-width 75vw
    position relative
    .next
      background url($urlTitle + 'newList/翻页角.png') 0 0 / 100% 100%
      $coord('WHRB', 35%, 30%, 3%, 5%)
      z-index 99
      pointer-events none
    .picbook
      $coord('WHLT', 30%, 40%, 10%, 15%)
      border 0.2rem solid white
      box-sizing border-box
      box-shadow 0px 0px 0.2rem rgba(0, 0, 0, 0.2)
      max-height 200px
      transition all 0.3s
      .name
        color rgb(254, 152, 9)
        font-size 1.2rem
        margin-top 80%
      .explain
        color rgb(254, 178, 68)
        margin-top 5%
        font-size 0.8rem
    .border
      $coord('WHLT', 36%, 48%, 7%, 11%)
      max-height 240px
      background url($urlTitle + 'personals/绘本封面.png') 0 0 / 100% 100%
      .play
        $coord('WHRB', 2.2rem, 2.1rem, 1.5rem, 1.5rem)
        background url($urlTitle + 'icon/icon-语音.png') 0 0 / 100% 100%
        transition all 0.3s
    .swiper
      $coord('WHRT', 52%, 82%, 5%, 10%)
      .card
        width 30%
        max-height 45%
        height auto
        float left
        margin 1% 1.5% 3% 1.5%
        position relative
        transition all 0.3s
        .cardBg
          width 100%
          max-height 45%
          height auto
        span
          $coord('WHLT', 65%, 10%, 17.5%, 10%)
          font-size 0.7rem
          color white
          $alignCenter()
        .iconBox
          $coord('WHLB', 80%, 60%, 9%, 10%)
          $alignCenter()
          img
            max-width 80%
            max-height 80%
    .swiper >>>.swiper-pagination-bullet-active
      background rgb(254, 149, 0)
    .swiper >>>.swiper-pagination-bullets
      bottom 0
    .typeBox
      $coord('WHRT', 30rem, 2.5rem, 3.5rem, -2rem)
      .type
        float right
        width 4rem
        height 1.8rem
        margin 0.85rem 0.25rem 0rem 0.3rem
        transform-origin 50% 100%
        transition all 0.2s
        $alignCenter()
        font-size 0.75rem
        padding-top 0.5rem
        box-sizing border-box
</style>
